<template>
  <div>

    <el-tree
      style="width:1000px;"
      :data="treeData"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">

        <span>{{ data.name }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
          >
            {{ data.managerName }}
          </el-button>
          <el-dropdown style="margin-left:20px;" @command="handleCommand">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="'add-'+data.id">添加子部门</el-dropdown-item>
              <el-dropdown-item :command="'edit-'+data.id">编辑部门</el-dropdown-item>
              <el-dropdown-item :command="'del-'+data.id">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>

      </span>
    </el-tree>
    <!-- 添加部门和编辑部门弹出层 -->
    <el-dialog :title="diaTitle" width="50%" :visible.sync="departFlag">
      <el-form ref="addDepartForm" label-width="120px" :model="formObj" :rules="rules">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="formObj.name" />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="formObj.code" />
        </el-form-item>
        <el-form-item label="部门负责人" prop="managerId">
          <el-select v-model="formObj.managerId">
            <el-option
              v-for="item in mangerList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="formObj.introduce" type="textarea" :rows="2" />
        </el-form-item>

      </el-form>
      <span slot="footer">
        <el-button type="primary" @click="toAdd">确定</el-button>
        <el-button @click="departFlag = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getDepartment, getManagerList, addDepartment, getDepartmentDetail, updateDepartment, delDepartment } from '@/api/department'
import { toTree } from '@/utils/index'
export default {
  data() {
    return {
      diaTitle: '添加部门',
      treeData: [],
      departFlag: false, // 控制添加部门弹出层
      mangerList: [], // 负责人列表
      formObj: { // 添加和编辑 需要收集数据
        code: '', // 部门编码
        introduce: '', // 部门介绍
        managerId: '', // 部门负责人
        name: '', // 部门名称
        pid: 0 // 父部门id
      },
      rules: {
        name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
        introduce: [{ required: true, message: '请输入部门介绍', trigger: 'blur' }],
        managerId: [{ required: true, message: '请选择部门负责人', trigger: 'blur' }],
        code: [{ required: true, message: '请输入部门编码', trigger: 'blur' }]
      }
    }
  },
  watch: {
    departFlag(newVal) { // 关闭弹出层的时候清空表单数据
      if (!newVal) {
        this.formObj = {}
        this.formObj.name = ''
        this.formObj.code = ''
        this.formObj.introduce = ''
        this.formObj.managerId = ''
        this.formObj.pid = 0
      }
    }
  },
  created() {
    this.getDepart()
  },
  methods: {
    async getDepart() { // 获取组织数据
      const res = await getDepartment()
      console.log(res, '-------------')
      this.treeData = toTree(res.data, 0) // 将组织的数据处理成树形在渲染
      console.log(this.treeData, '处理好的树形数据')
    },
    async  handleCommand(command) { // 下拉菜单的事件
      const carr = command.split('-')
      if (carr[0] === 'add') {
        this.departFlag = true // 打开添加部门弹出层
        this.diaTitle = '添加部门'
        const mangerRes = await getManagerList() // 调用部门负责人列表接口
        console.log(mangerRes, '获取负责人列表')
        this.mangerList = mangerRes.data
        this.formObj.pid = carr[1]// 存储父部门id
      }
      // 进入编辑
      if (carr[0] === 'edit') {
        this.departFlag = true // 打开编辑部门弹出层
        this.diaTitle = '编辑部门'
        const mangerRes = await getManagerList() // 调用部门负责人列表接口
        console.log(mangerRes, '获取负责人列表')
        this.mangerList = mangerRes.data
        // 回显
        const editRes = await getDepartmentDetail(carr[1])// 获取部门详情
        console.log(editRes, '------------')
        this.formObj = editRes.data // 详情数据 给v-model表单的数据直接全部复制
      }
      // 删除接口
      if (carr[0] === 'del') {
        const delRes = await delDepartment(carr[1])
        console.log(delRes, '删除成功')
        this.$message.success('删除成功')
        this.getDepart()// 重新获取组织列表数据
      }
    },
    toAdd() { // 添加部门 或编辑部门
      this.$refs.addDepartForm.validate(async valid => {
        if (valid) {
          if (this.formObj.id) {
            const editRes = await updateDepartment(this.formObj)
            console.log(editRes, '编辑部门成功')
            this.$message.success('编辑部门成功')
          } else {
            const res = await addDepartment(this.formObj)
            console.log(res, '添加部门成功')
            this.$message.success('添加部门成功')
          }
          this.$refs.addDepartForm.resetFields() // 重置表单
          this.departFlag = false
          this.getDepart() // 重新获取组织列表数据
        }
      })
    }
  }
}
</script>
<style lang="scss">
  .custom-tree-node{
    width: 1400px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
  }
</style>
